2008

Weather Web service (flex) - Part 2

Posted By : Shaun McCran
Related Categories: Flex Remoting, RIA, Flex

In the first part of this article, we created the coldfusion back end (cfc's). The first thing we'll do in the Flex section is setup our initialize function which will call a Remote Object, to interface with the cfcs.

view plain print about

1/* Init the app
2*/
3    private function init():void
4            {
5                RO.populateCombo();
6            }

I prefer using Remote Object, as it fits very nicely with coldfusion, and its very easy to setup, for great results. There is supposed to be a speed difference too, but I can't honestly say I'd notice.

view plain print about

1<mx:RemoteObject destination="ColdFusion"
2                 id="RO"
3                 fault="Alert.show(event.fault.message)"
4                 source="cfc.weather"
5                 showBusyCursor="true">
6
7    <mx:method name="populateCombo" result="handleCombo(event)" fault="Alert.show(event.fault.message)"/>
8    <mx:method name="getForecast" result="handleForecast(event)" fault="Alert.show(event.fault.message)"/>
9
10</mx:RemoteObject>

Above we have a Remote Object call. Specify a destination of ColdFusion, and point the source at your cfc. Remember that its dot notation. (IE folder.folder.cfcName).

Then we have a separate method call for each of the cfc methods. Each pointing at their own actionScript handler.

So our init function will call the Remote Object, which will populate the combo box. When an item is selected in the combo, we fire off the callForecast() method.

view plain print about

1/* Handles the combo results event
2            */
3            private function handleCombo(event:ResultEvent):void
4            {
5                locationCombo.dataProvider = event.result;
6            }
7
8            /* Function to call forecast RO from combobox
9            */
10            private function callForecast():void
11            {
12                RO.getForecast(locationCombo.selectedItem.data, _unit);
13            }
14
15
16<mx:ComboBox x="103" y="38" id="locationCombo" change="callForecast()" prompt="Select Location"></mx:ComboBox>

The Remote Object passes the country code back to our cfc, which actions the cfhttp call. This is returned as xml to our Flex app, and handled in this function:

view plain print about

1/* Handles the forecast result
2            */
3            private function handleForecast(event:ResultEvent):void
4            {
5                _xmlBlock = XML(event.result);
6                // label data
7                var labelText:String = _xmlBlock..item.title;
8                returnLabel.text = labelText
9
10                // get link url
11                var link:String = _xmlBlock..channel.link;
12                _link = link
13
14                var desc:String = _xmlBlock..item.description;
15                returnDescription.htmlText = desc;
16
17                // turn on hidden elements
18                linkButton.enabled = true;

This formats the response as xml, and maps it out to display elements on screen.

Lastly we have a button that will take a user through to the full forecast, this is a standard Flex UrlRequest:

view plain print about

1/* url handler for button
2            */
3            private function goToUrl():void
4            {
5                var url:URLRequest = new URLRequest(_link);
6                navigateToURL(url,"_blank");
7            }
8
9<mx:Button x="10" y="497" id="linkButton" label="Full Forecast" click="goToUrl()" enabled="false"/>

You can download the full source here.